<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>scit数据显示（可以聚合）</title>
    <link rel="stylesheet" href="../css/ol.css" type="text/css">
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/mapMain.js"></script>
    <script src="../build/ol.js"></script>
</head>
<body>
<div id="map"></div>

</body>
<script type="text/javascript">

    var all_map;//定义地图全局变量

    var scitLayer;

    $(function(){
        var options = {id:'map'}
        all_map = showMap(options);
        showScitData("test2.json");
    })

    function showScitData(jsonFileName){

        all_map.removeLayer(scitLayer);//先清空原来的图层
        $.getJSON("json/"+jsonFileName, function (data) {
            //var dateTime = data.dateTime;
            //var stormNum = data.stormNum;
            var stormTrackingList = data.stormTracking;
            var scitFeatures = [];
            for(var i in stormTrackingList){
                var scit = stormTrackingList[i];
                scitFeatures.push(createScitCurrentFeature(scit));
                scitFeatures = scitFeatures.concat(createScitNextFeature(scit.nextTime));
                scitFeatures = scitFeatures.concat(createScitPreFeature(scit.preTime));
            }

            if(scitFeatures.length==0){
                return ;
            }

            //ol.source.Vector，可以使用feature.get('key')
            var scitSource = new ol.source.Vector({
                features: scitFeatures
            });

            //需要聚合时使用，此处不需要（ol.source.Cluster，不能使用feature.get('key')）
            //可以使用feature.get('features')
            var scitClusterSources = new ol.source.Cluster({
                distance: 40,//距离
                source: scitSource,
            });

            var styleCache = {};
            scitLayer = new ol.layer.Vector({
                source: scitSource,
                style: function(feature) {

                    var type = feature.get('type');
                    var size = '',radius = 2,style,id;
                    if(type == 'current'){
                        id = feature.get('id');
                        size = feature.get('number');
                        radius = feature.get('radius');//3
                        style = styleCache['current'+id+radius];
                    }else if(type == 'next'){
                        style = styleCache['next'];
                    }else if(type == 'preMain'){
                        style = styleCache['preMain'];
                    }else if(type == 'preAdd'){
                        style = styleCache['preAdd'];
                    }

                    if (!style) {
                        if(type == 'current'){
                            style = new ol.style.Style({
                                image: new ol.style.Circle({
                                    radius: radius,
                                    stroke: new ol.style.Stroke({
                                        color: '#FF0000'
                                    })
                                }),
                                text: new ol.style.Text({
                                    text: size.toString(),
                                    fill: new ol.style.Fill({
                                        color: '#000000'
                                    })
                                })
                            });
                            styleCache['current'+id+radius] = style;
                        }else if(type == 'next'){
                            style = new ol.style.Style({
                                image: new ol.style.Circle({
                                    radius: radius,
                                    stroke: new ol.style.Stroke({
                                        color: '#3BFF19'//绿色预测
                                    })
                                })
                            });
                            styleCache['next'] = style;
                        }else if(type == 'preMain'){
                            style = new ol.style.Style({
                                image: new ol.style.Circle({
                                    radius: radius,
                                    stroke: new ol.style.Stroke({
                                        color: '#0817FF'
                                    })
                                })
                            });
                            styleCache['preMain'] = style;
                        }else if(type == 'preAdd'){
                            style = new ol.style.Style({
                                image: new ol.style.Circle({
                                    radius: radius,
                                    stroke: new ol.style.Stroke({
                                        color: '#0817FF'
                                    })
                                })
                            });
                            styleCache['preAdd'] = style;
                        }
                    }
                    return style;
                }
            });

            all_map.addLayer(scitLayer);//展示图层
        });
    }

    function createScitCurrentFeature(scit){
        var id = scit.id;
        var number = scit.number;
        var radius = scit.radius;
        //var stormTrackingDateTime = scit.stormTrackingDateTime;
        var currentTime = scit.currentTime;
        var lon = parseFloat(currentTime.x);
        var lat = parseFloat(currentTime.y);
        var point = new ol.geom.Point([lon,lat]);
        var feature = new ol.Feature(point);
        feature.set('id',id);
        feature.set('number',number);
        feature.set('radius', radius);
        feature.set('type','current');
        return feature;
    }

    function createScitNextFeature(nextList){
        var nextFeatures = [];
        for(var i in nextList){
            var lon = parseFloat(nextList[i].x);
            var lat = parseFloat(nextList[i].y);
            var point = new ol.geom.Point([lon,lat]);
            var feature = new ol.Feature(point);
            feature.set('type','next');
            nextFeatures.push(feature);
        }
        return nextFeatures;
    }

    function createScitPreFeature(preList){
        var preFeatures = [];
        for(var i in preList){
            var itemPre = preList[i];
            var symbol = itemPre.symbol;
            var mainpoint = itemPre.mainpoint;
            var lon = parseFloat(mainpoint.x);
            var lat = parseFloat(mainpoint.y);
            var point = new ol.geom.Point([lon,lat]);
            var feature = new ol.Feature(point);
            feature.set('type','preMain');
            preFeatures.push(feature);
            if(symbol==2){
                var addpoint = itemPre.addpoint;
                lon = parseFloat(addpoint.x);
                lat = parseFloat(addpoint.y);
                point = new ol.geom.Point([lon,lat]);
                feature = new ol.Feature(point);
                feature.set('type','preAdd');
                preFeatures.push(feature);
            }
        }
        return preFeatures;
    }


</script>
</html>